const { getAllFeedbackTypes,addFeedback } = require("../../utils/request");
const config = require("../../utils/config");

Page({
  data: {
    imageUrls: [], // 用户上传的图片
    feedbackText: "", // 用户反馈内容
    contactInfo: "", // 反馈人联系方式
    feedbackTypes: [], // 动态加载的反馈类型
    selectedType: null, // 用户选择的反馈类型
    showModal: false, // 控制弹窗显示
    selectedImage: "", // 当前查看的图片路径
  },

  // 页面加载时获取反馈类型
  onLoad() {
    this.loadFeedbackTypes();
  },

  // 获取反馈类型
  loadFeedbackTypes() {
    getAllFeedbackTypes()
      .then((res) => {
        if (res.code === "00000" && res.data) {
          // 将后端返回的反馈类型数据传入
          this.setData({ feedbackTypes: res.data });
        } else {
          wx.showToast({
            title: "Failed to load feedback types.",
            icon: "none",
          });
        }
      })
      .catch((err) => {
        wx.showToast({
          title: "Network error. Please try again.",
          icon: "none",
        });
      });
  },

  // 用户输入反馈内容
  onFeedbackInput(e) {
    this.setData({ feedbackText: e.detail.value });
  },

  // 用户输入联系方式
  onContactInput(e) {
    this.setData({ contactInfo: e.detail.value });
  },

  // 选择反馈类型
  onTypeChange(e) {
    const index = e.detail.value;
    const selectedType = this.data.feedbackTypes[index]; // 使用返回的数据
    this.setData({ selectedType });
  },

  // 选择图片
  chooseImage() {
    if (this.data.imageUrls.length >= 3) {
      wx.showToast({
        title: "You can upload up to 3 images only.",
        icon: "none",
      });
      return;
    }

    wx.chooseMedia({
      count: 3 - this.data.imageUrls.length, // 最多选择 3 张图片
      mediaType: ["image"],
      sourceType: ["album", "camera"],
      success: (res) => {
        // 逐个上传图片
        res.tempFiles.forEach((file) => {
          this.uploadImage(file.tempFilePath); // 确保传递正确的 filePath
        });
      },
      fail: (err) => {
        console.log("选择图片失败", err);
        wx.showToast({
          title: "选择图片失败，请重试",
          icon: "none",
        });
      },
    });
  },

  // 上传图片到服务器
  uploadImage(filePath) {
    // 确保 filePath 是一个有效字符串
    if (!filePath) {
      wx.showToast({
        title: "File path is invalid",
        icon: "none",
      });
      return;
    }

    const token = wx.getStorageSync("token");
    wx.uploadFile({
      url: `${config.baseURL}/art-resource/uploadFeedbackImage`, // 服务器上传接口
      filePath: filePath,
      name: "file", // 必须与后端 `@RequestParam("file")` 名称匹配
      header: {
        "Content-Type": "multipart/form-data",
        Authorization: token, // 设置 Authorization 头部
      },
      success: (res) => {
        try {
          const parsedData = JSON.parse(res.data);
          if (parsedData && parsedData.data) {
            console.log("上传成功的图片路径：" + parsedData.data);
            // 将新图片路径添加到 imageUrls
            const imageURL = config.ImageURL + parsedData.data;
            this.setData({
              imageUrls: [...this.data.imageUrls, imageURL],
            });
          } else {
            wx.showToast({
              title: "上传失败，请重试",
              icon: "none",
            });
          }
        } catch (error) {
          console.log("JSON 解析失败", error);
          wx.showToast({
            title: "上传失败，请重试",
            icon: "none",
          });
        }
      },
      fail: (err) => {
        console.log("上传失败", err);
        wx.showToast({
          title: "上传失败，请重试",
          icon: "none",
        });
      },
    });
  },

  // 删除图片
  deleteImage(e) {
    const index = e.currentTarget.dataset.index;
    const imageUrls = [...this.data.imageUrls];
    imageUrls.splice(index, 1); // 删除指定索引的图片
    this.setData({
      imageUrls,
    });
  },

  // 打开图片查看弹窗
  openImage(e) {
    const imageUrl = e.currentTarget.dataset.url;
    console.log("用户点击的放大图片路径：" + imageUrl);
    this.setData({
      showModal: true,
      selectedImage: imageUrl,
    });
  },

  //放大图片
  previewImage(e) {
    const imageUrl = e.currentTarget.dataset.url;
    wx.previewImage({ urls: [imageUrl] });
  },

  // 关闭图片查看弹窗
  closeModal() {
    this.setData({
      showModal: false,
      selectedImage: "",
    });
  },

  // 提交反馈
  submitFeedback() {
    const { feedbackText, contactInfo, selectedType, imageUrls } = this.data;

    // 检查必填项
    if (!feedbackText.trim()) {
      wx.showToast({
        title: "请输入反馈内容",
        icon: "none",
      });
      return;
    }
    if (!selectedType) {
      wx.showToast({
        title: "请选择反馈类型",
        icon: "none",
      });
      return;
    }

    // 遍历 imageUrls，去除每个对象前的 config.ImageURL 内容
    const cleanedImageUrls = imageUrls.map(url => url.replace(config.ImageURL, ''));

    // 提交逻辑
    const feedbackData = {
      typeId: selectedType.id,
      contactInfo,
      content: feedbackText,
      imageUrls: JSON.stringify(cleanedImageUrls),  // 转换为 JSON 数组格式
    };

    console.log("Feedback Data:", feedbackData);

    addFeedback(feedbackData)
      .then((res) => {
        if (res.code === "00000") {
          // 清空表单
          this.setData({
            feedbackText: "",
            contactInfo: "",
            selectedType: null,
            imageUrls: [],
          });

          wx.showToast({
            title: "反馈提交成功",
            icon: "success",
          });

          // 跳转到我的反馈页面，也就是上一页
          wx.navigateBack(); 
        } else {
          wx.showToast({
            title: "反馈提交失败",
            icon: "none",
          });
        }
      })
      .catch((err) => {
        console.log("反馈提交失败", err);
        wx.showToast({
          title: "反馈提交失败",
          icon: "none",
        });
      });
  },
});